<template>
  <div class="add-or-update">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">
      <el-form-item label="角色代码 :" prop="enname">
        <el-input placeholder="请输入工号" v-model="dataForm.enname">
        </el-input>
      </el-form-item>
      <el-form-item label="角色名称:" prop="name">
        <el-input placeholder="请输入名称" v-model="dataForm.name">
        </el-input>
      </el-form-item>
      <el-form-item label="备注:" prop="remarks">
        <el-input type="textarea" placeholder="请输入备注" :rows=4 v-model="dataForm.remarks">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      dataForm: {
        id: '',
        name: '',
        remarks: '',
        enname: ''
      },
      dataRule: {
        enname: [
          { required: true, message: '角色代码不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }

        ]
      }
    }
  },
  created () {
    let id = this.$route.params.id || 0
    console.log('id', id)
    this.dataForm.id = id
    this.init(id)
  },
  methods: {
    // 根据是新增还是修改对表单中的字段进行处理
    init (id) {
      this.dataForm.id = id || 0
      console.log(this.dataForm.id)
      if (this.dataForm.id) {
        this.loading = true
        // 修改
        this.$http({
          url: this.$http.adornUrl(`/sysRole/query/detail`),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({data}) => {
          this.loading = false
          this.dataForm.id = data.id
          this.dataForm.name = data.name
          this.dataForm.enname = data.enname
          this.dataForm.remarks = data.remarks
        })
      } else {
        // 新增时清空表单
        this.resetForm('dataForm')
      }
    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl('/sysRole/save'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            data: this.$http.adornData(
              {
                id: this.dataForm.id || undefined,
                enname: this.dataForm.enname,
                name: this.dataForm.name,
                remarks: this.dataForm.remarks
              },
              false,
              'form'
            )
          })
            .then(() => {
              this.loading = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500  // 持续时间

              })
              this.$router.push({name: 'sys-role'})
            })
        }
      })
    },
    // 表单重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
